<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet"
          href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <script src="./layui/layui.all.js"></script>
    <script src="./bootstrap-3.3.7-dist/js/jquery-3.1.1.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>
    <style type="text/css">
        body {
            background: url(img/regbg.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .content {
            margin: 0 auto;
            margin-top: 150px;
            padding: 20px;
            width: 500px;
            height: 550px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
        }

        #regicon {
            margin-top: 10px;
            margin-left: 190;
            width: 80px;
            height: 80px;
        }

        input {
            width: 30px;
        }
    </style>
</head>

<body>
<div class="content">
    <div style="width:100%; height:auto;">
        <img id="regicon" src="img/regicon.png"><br>
        <br>
    </div>
    <hr/>
    <div class="form-group">
        <label>用户名</label>
        <input type="text" class="form-control" name="name" placeholder="username" id = "name" required>
    </div>

    <div class="form-group">
        <label>密码</label>
        <input type="password" class="form-control" placeholder="Password" id = "password" name="password" required>
    </div>

    <div class="form-group">
        <label>邮箱</label>
        <input type="email" class="form-control" name="email" id="email" placeholder="Email" required>
    </div>

    <button id="subregister" class="btn btn-success" style="margin-left: 190px;">注&nbsp;&nbsp;&nbsp;&nbsp;册</button>
</div>
</div>
</body>
<script type="text/javascript">
    var layer = layui.layer;
    $('#subregister').click(function (e) {
        var name = $('#name').val();
        var pwd = $('#password').val();
        var email = $('#email').val();

        if(name.length > 10){
            layer.msg('用户名不能大于10位');
            return;
        }
        if(pwd.length > 13){
            layer.msg('密码不能大于13位');
            return;
        }

        $.ajax({
            url: 'register',
            method: 'POST',
            dataType: "json",
            traditional: true,
            data: {
                "name": name,
                "password": pwd,
                "email": email
            },
            success: function (data) {
                if(data.status == 'ok'){
                    console.log("success");
                    layer.msg(data.msg);
                    window.location.href = '/login.html';
                }else{
                    layer.msg(data.msg);
                }
            },
            error: function (data) {

            }
        })
    })
</script>
</html>
